<template>

  <v-container fluid class="custom-container">

    <xy-header-top title='物料出库'>
      <v-btn icon slot="left" small @click="routerBack">
        <v-icon class="white--text">iconfont-icon iconleft</v-icon>
      </v-btn>
    </xy-header-top>

    <v-layout>

      <v-flex md6 sm12 xs12>

        <v-card flat style="min-height: 480px">

          <v-card-text>
            <v-list dense>

              <v-list-item class="font-weight-bold">
                <v-list-item-content>名称</v-list-item-content>
                <v-list-item-content>{{inventory.material.name|strAbbr15}}</v-list-item-content>
              </v-list-item>

              <v-list-item class="font-weight-bold">
                <v-list-item-content>分类</v-list-item-content>
                <v-list-item-content>{{inventory.material.category.name}}</v-list-item-content>
              </v-list-item>

              <v-list-item class="font-weight-bold">
                <v-list-item-content>批次</v-list-item-content>
                <v-list-item-content>{{inventory.batchNo}}</v-list-item-content>
              </v-list-item>

              <v-list-item class="font-weight-bold">
                <v-list-item-content>生产时间</v-list-item-content>
                <v-list-item-content>{{inventory.productionTime | dateFormat | emptyFilter}}
                </v-list-item-content>
              </v-list-item>

              <v-list-item class="font-weight-bold">
                <v-list-item-content>入库时间</v-list-item-content>
                <v-list-item-content>{{inventory.createTime | datetimeFormat}}</v-list-item-content>
              </v-list-item>

              <v-list-item class="font-weight-bold">
                <v-list-item-content>过期时间</v-list-item-content>
                <v-list-item-content>{{inventory.expireTime | datetimeFormat }}</v-list-item-content>
              </v-list-item>

              <v-list-item class="font-weight-bold">
                <v-list-item-content>打印人</v-list-item-content>
                <v-list-item-content>{{userContext.nickname | emptyFilter | strAbbr7 }}</v-list-item-content>
              </v-list-item>

              <v-list-item class="font-weight-bold">
                <v-list-item-content>入库数量</v-list-item-content>
                <v-list-item-content>{{inventory.quantity}} &nbsp; {{inventory.unit.name}}
                </v-list-item-content>
              </v-list-item>

              <v-list-item class="font-weight-bold">
                <v-list-item-content>剩余数量</v-list-item-content>
                <v-list-item-content>{{inventory.totalQuantity}} &nbsp;{{inventory.material.unit.name}}
                </v-list-item-content>
              </v-list-item>

              <v-list-item class="font-weight-bold">
                <v-list-item-content>出库数量</v-list-item-content>

                <v-list-item-content style="display:unset">
                  <v-btn :disabled="buttonAvailable" icon small @click="minusQuantity">
                    <v-icon>iconfont-icon iconjian</v-icon>
                  </v-btn>
                  &nbsp;
                  <input type="number" class="quantity" v-model="form.quantity"/>
                  &nbsp;
                  <v-btn :disabled="buttonAvailable" icon small @click="addQuantity">
                    <v-icon>iconfont-icon iconjia</v-icon>
                  </v-btn>
                </v-list-item-content>

              </v-list-item>

            </v-list>

          </v-card-text>

          <v-card-actions>
            <xy-button :loading="loading" block @click="confirmOut">确认出库</xy-button>
          </v-card-actions>

        </v-card>

      </v-flex>
    </v-layout>
  </v-container>

</template>

<script>
    import {mapState} from 'vuex';

    /**
     * 出库表单
     * @author Canaan
     * @date 2019/8/10 18:39.
     */
    export default {
        name: 'popupInventoryForm',
        mounted() {
            this.form.requestId = Math.uuid();
            if (this.$route.params.batchNo) {
                this.loadData(this.$route.params.batchNo);
            } else {
                this.loadData();
            }
        },
        props: {
            batchNo: null
        },
        data() {
            return {
                loading: false,
                inventory: {
                    material: {
                        id: null,
                        name: null,
                        attach: {},
                        unit: {
                            name: null
                        },
                        category: {}
                    },
                    unit: {
                        name: null
                    }
                },
                availableQuantity: 0,//可用数量
                form: {
                    requestId: null, //唯一值uuid
                    materialId: null, //出库物料id
                    quantity: 0, //出库数量
                    storeId: null, //所属门店
                }

            }
        },
        components: {},
        computed: {
            ...mapState(['userContext']),
            buttonAvailable() {
                return !this.availableQuantity;
            }
        },
        methods: {
            routerBack() {
                this.$router.back()
            },
            addQuantity() {
                this.form.quantity = Math.min(this.availableQuantity, parseInt(this.form.quantity) + 1);
            },
            minusQuantity() {
                this.form.quantity = Math.max(0, parseInt(this.form.quantity) - 1);
            },
            loadData(batchNo) {
                let _batchNo = this.batchNo || batchNo;

                if (!_batchNo) {
                    this.$message.warning("批次号为空");
                    return;
                }

                this.$ajax.get('inventory/get_detail', {
                    params: {
                        batchNo: _batchNo
                    }
                }).then(res => {

                    if (res.code !== 'ok') {
                        this.$message.error(res.msg);
                        return;
                    }
                    this.inventory = res.data;
                    this.form.materialId = this.inventory.material.id;
                    this.form.storeId = this.inventory.store.id;
                    this.availableQuantity = res.data.totalQuantity;
                })
            },
            confirmOut() {
                if (!this.form.quantity || this.form.quantity === 0) {
                    this.$message.info("出库数量不能为空");
                    return;
                }
                if (this.form.quantity > this.availableQuantity) {
                    this.$message.info("出库数量要小于当前库存的数量");
                    return;
                }
                if (this.availableQuantity === 0) {
                    this.$message.info("当前库存的数量为0");
                    return;
                }

                this.loading = true;
                this.$ajax.put('/inventory_trace/popup', this.form).then(res => {
                    this.form.quantity = 0;
                    this.loading = false;
                    if (res.code !== 'ok') {
                        this.$message.error(res.msg);
                        return;
                    }
                    this.$message.success(res.msg, () => {
                        this.$router.push('/inventoryTraceIndex');
                    });

                })
            }

        },
        watch: {},
        filters: {},
        beforeDestroy() {

        }
    }

</script>

<style scoped>
  .v-list-item {
    padding: 0 8px;
  }

  .quantity {
    display: inline-block;
    width: 60px;
    height: 35px;
    margin: 0;
    text-align: center;
    padding: 5px;
    outline: 0;
    border: 1px solid #ddd;
    border-radius: 3px;
  }

  .v-btn {
    margin: 0;
  }


</style>
